<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <title>消息</title>
    <meta name="format-detection" content="telephone=no">
    <script src="__GLOBAL__/jquery-1.8.3.min.js"></script>
    <script src="__GLOBAL__/common.js"></script>
    <link rel="stylesheet" href="__GLOBAL__/reset.css"/>
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/personal.css">
    <style>
        .line-wrapper {
            width: 100%;
            height: 1.2rem;
            overflow: hidden;
            font-size: 0.2rem;
            background: #fff;
            border-bottom: 1px solid #e9e9e9;
        }

        .line-scroll-wrapper {
            white-space: nowrap;
            height: 1.2rem;
            clear: both;
        }

        .line-btn-delete {
            float: left;
            width: 1.5rem;
            height: 1.2rem;
            background: #fa5a5a;
        }

        .line-btn-delete button {
            width: 0.7rem;
            height: 0.7rem;
            margin: 0.25rem 0.4rem;
            border: none;
            font-size: 24px;
            font-family: 'Microsoft Yahei';
            color: #fff;
            background: url("__IMG__/order/delete-icon.png");
            background-size: 100% 100%;
        }

        .line-normal-wrapper {
            display: inline-block;
            line-height: 1rem;
            float: left;
        }

        .line-normal-icon-wrapper {
            float: right;
            width: 1rem;
            height: 1rem;
            text-align: right;
            margin-right: 12px;
        }
        .line-normal-icon-wrapper p{
            margin-top: 0.16rem;
            height: 0.3rem;
            line-height: 0.3rem;
            color: #909090;
            font-size: 0.22rem;
        }

        .line-normal-avatar-wrapper {
            width: 0.9rem;
            height:0.9rem;
            float: left;
            margin-left: 0.1rem;
        }

        .line-normal-avatar-wrapper img {
            width: 100%;
            height: 100%;
            border-radius: 60px;
        }

        .line-normal-left-wrapper {
            float: left;
            padding: 0.15rem 0;
            overflow: hidden;
        }

        .line-normal-info-wrapper {
            float: left;
            margin-left: 0.1rem;
        }

        .line-normal-user-name {
            height: 0.3rem;
            line-height: 0.3rem;
            font-size: 0.3rem;
            color: #343434;
            margin-top: 0.1rem;
        }
        .line-normal-user-name span{
            float: left;
        }

        .line-normal-msg {
            height: 0.4rem;
            line-height: 0.4rem;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #696969;
            margin-top: 0.1rem;
        }

        .line-normal-time {
            height: 28px;
            line-height: 28px;
            color: #999;
            margin-top: 11px;
        }
        .tip-radius{
            float: left;
            margin: 0.05rem 0 0 0.1rem;
            height: 0.1rem;
            width: 0.1rem;
            background: #fe0000;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div class="line-wrapper">
    <div class="line-scroll-wrapper">
        <div class="line-normal-wrapper">
            <div class="line-normal-left-wrapper">
                <div class="line-normal-avatar-wrapper"><img src="__IMG__/order/message.png" /></div>
                <div class="line-normal-info-wrapper">
                    <div class="line-normal-user-name"><span>蜡笔小新</span><i class="tip-radius"></i></div>
                    <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                    <!--<div class="line-normal-time">1分钟前</div>-->
                </div>
            </div>
            <div class="line-normal-icon-wrapper">
                <p>17:00</p>
            </div>
        </div>
        <div class="line-btn-delete"><button></button></div>
    </div>
</div>
<div class="line-wrapper">
    <div class="line-scroll-wrapper">
        <div class="line-normal-wrapper">
            <div class="line-normal-left-wrapper">
                <div class="line-normal-avatar-wrapper"><img src="__IMG__/order/message.png" /></div>
                <div class="line-normal-info-wrapper">
                    <div class="line-normal-user-name"><span>蜡笔小新</span><i class="tip-radius"></i></div>
                    <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                    <!--<div class="line-normal-time">1分钟前</div>-->
                </div>
            </div>
            <div class="line-normal-icon-wrapper">
                <p>17:00</p>
            </div>
        </div>
        <div class="line-btn-delete"><button></button></div>
    </div>
</div>
<div class="line-wrapper">
    <div class="line-scroll-wrapper">
        <div class="line-normal-wrapper">
            <div class="line-normal-left-wrapper">
                <div class="line-normal-avatar-wrapper"><img src="__IMG__/order/message.png" /></div>
                <div class="line-normal-info-wrapper">
                    <div class="line-normal-user-name"><span>蜡笔小新</span><i class="tip-radius"></i></div>
                    <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                    <!--<div class="line-normal-time">1分钟前</div>-->
                </div>
            </div>
            <div class="line-normal-icon-wrapper">
                <p>17/08/09</p>
            </div>
        </div>
        <div class="line-btn-delete"><button></button></div>
    </div>
</div>
<div class="line-wrapper">
    <div class="line-scroll-wrapper">
        <div class="line-normal-wrapper">
            <div class="line-normal-left-wrapper">
                <div class="line-normal-avatar-wrapper"><img src="__IMG__/order/message.png" /></div>
                <div class="line-normal-info-wrapper">
                    <div class="line-normal-user-name"><span>蜡笔小新</span><i class="tip-radius"></i></div>
                    <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
                    <!--<div class="line-normal-time">1分钟前</div>-->
                </div>
            </div>
            <div class="line-normal-icon-wrapper">
                <p>17:00</p>
            </div>
        </div>
        <div class="line-btn-delete"><button></button></div>
    </div>
</div>
<script>
    $(document).ready(function(e) {
        // 设定每一行的宽度=屏幕宽度+按钮宽度
        $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width());
        // 设定常规信息区域宽度=屏幕宽度
        $(".line-normal-wrapper").width($(".line-wrapper").width());
        // 设定文字部分宽度（为了实现文字过长时在末尾显示...）
        $(".line-normal-msg").width($(".line-normal-wrapper").width() - 200);

        // 获取所有行，对每一行设置监听
        var lines = $(".line-normal-wrapper");
        var len = lines.length;
        var lastX, lastXForMobile;

        // 用于记录被按下的对象
        var pressedObj;  // 当前左滑的对象
        var lastLeftObj; // 上一个左滑的对象

        // 用于记录按下的点
        var start;

        // 网页在移动端运行时的监听
        for (var i = 0; i < len; ++i) {
            lines[i].addEventListener('touchstart', function(e){
                lastXForMobile = e.changedTouches[0].pageX;
                pressedObj = this; // 记录被按下的对象

                // 记录开始按下时的点
                var touches = event.touches[0];
                start = {
                    x: touches.pageX, // 横坐标
                    y: touches.pageY  // 纵坐标
                };
            });

            lines[i].addEventListener('touchmove',function(e){
                // 计算划动过程中x和y的变化量
                var touches = event.touches[0];
                delta = {
                    x: touches.pageX - start.x,
                    y: touches.pageY - start.y
                };

                // 横向位移大于纵向位移，阻止纵向滚动
                if (Math.abs(delta.x) > Math.abs(delta.y)) {
                    event.preventDefault();
                }
            });

            lines[i].addEventListener('touchend', function(e){
                if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
                    $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑
                    lastLeftObj = null; // 清空上一个左滑的对象
                }
                var diffX = e.changedTouches[0].pageX - lastXForMobile;
                if (diffX < -150) {
                    $(pressedObj).animate({marginLeft:"-1.5rem"}, 500); // 左滑
                    lastLeftObj && lastLeftObj != pressedObj &&
                    $(lastLeftObj).animate({marginLeft:"0"}, 500); // 已经左滑状态的按钮右滑
                    lastLeftObj = pressedObj; // 记录上一个左滑的对象
                } else if (diffX > 150) {
                    if (pressedObj == lastLeftObj) {
                        $(pressedObj).animate({marginLeft:"0"}, 500); // 右滑
                        lastLeftObj = null; // 清空上一个左滑的对象
                    }
                }
            });
        }

        // 网页在PC浏览器中运行时的监听
        for (var i = 0; i < len; ++i) {
            $(lines[i]).bind('mousedown', function(e){
                lastX = e.clientX;
                pressedObj = this; // 记录被按下的对象
            });

            $(lines[i]).bind('mouseup', function(e){
                if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
                    $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑
                    lastLeftObj = null; // 清空上一个左滑的对象
                }
                var diffX = e.clientX - lastX;
                if (diffX < -150) {
                    $(pressedObj).animate({marginLeft:"-1.5rem"}, 500); // 左滑
                    lastLeftObj && lastLeftObj != pressedObj &&
                    $(lastLeftObj).animate({marginLeft:"0"}, 500); // 已经左滑状态的按钮右滑
                    lastLeftObj = pressedObj; // 记录上一个左滑的对象
                } else if (diffX > 150) {
                    if (pressedObj == lastLeftObj) {
                        $(pressedObj).animate({marginLeft:"0"}, 500); // 右滑
                        lastLeftObj = null; // 清空上一个左滑的对象
                    }
                }
            });
        }
    });
</script>
</body>
</html>